import { defineComponent } from 'vue';
import type { ConfigProviderThemeVars } from 'vant';
import './Title.less';
import { ConfigProvider } from 'vant';
import { NavBar } from 'vant';
import setting from '/@/settings/projectSetting';

export default defineComponent({
  name: 'VerseTitle',
  props: {
    title: {
      type: String as PropType<string>,
      default: () => {
        return '影之诗Evolve';
      },
    },
    leftArrow: {
      type: Boolean as PropType<boolean>,
      default: () => {
        return false;
      },
    },
  },
  emits: ['leftClick'],
  setup(props, { emit }) {
    const themeVars: ConfigProviderThemeVars = {
      navBarIconColor: '#040404',
      navBarTitleTextColor: '#040404',
    };
    return () => (
      <div class='verse-page-title' style={{ zIndex: setting.PageTitleZIndex }}>
        <ConfigProvider themeVars={themeVars}>
          <NavBar
            title={props.title}
            leftArrow={props.leftArrow}
            onClickLeft={() => {
              emit('leftClick');
            }}
          />
        </ConfigProvider>
      </div>
    );
  },
});
